<template>
<div class="firstHeader">
  <div class="header-title">
    <span class="text1">{{$t('login.text')}}</span>
    <span class="text2">售后保障</span>
  </div>
  <div class="input">
    <span><van-icon name="search" /></span>

    <input class="search" type="text" placeholder="搜索商品">
  </div>
</div>
</template>

<script>
export default {
  name: "FirstHeader"

}
</script>

<style scoped lang="scss">
.firstHeader{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background-color: #32AAA9;
  .header-title{
    padding: 10px 10px 0 ;
    .text1{
      font-size: 20px;
    }
  }
  .input{
    margin-top: 5px;
    margin-left: 10px;
    width: 90%;
    border-radius: 20px;
    border: 1px solid #54545C;
    padding: 6px ;
    background-color: rgba(255,255,255,.5);
    .search{
      margin-left: 5px;
      border: 0;
      width: 90%;
      background: #96d5d8;
      //background: #42b983;
      //background-color: rgba(255,255,255,.5);

    }

  }

}

</style>